<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Demo</title>
</head>
<body>
    <div id="app" style="text-align: center;">
        <!-- 标题 -->
        <h1 id="title">欢迎您：未登录</h1>
        <!-- 创建密码和账号输入组件 -->
        <div id="userName">账号：<input id="userNameInput" type="text" /></div>
        <div id="password">密码：<input id="passwordInput" type="password" /></div>
        <!-- 登录按钮 -->
        <div id="button" style="border-radius: 30px; width: 100px; margin: 20px auto; color: white; background-color: blue;">登录</div>
    </div>
    <script>
        var titleElement = document.getElementById('title');
        var userNameElement = document.getElementById('userName');
        var passwordElement =document.getElementById('password');
        var buttonElement = document.getElementById('button');
        var userNameInputElement = document.getElementById('userNameInput');
        var passwordInputElement = document.getElementById('passwordInput');

        noLogin =true;
        buttonElement.addEventListener('click', function(){
            if (noLogin) {
                login()
            } else {
                logout()
            }
        });

        userNameElement.addEventListener("change", function(event){
            userName = event.target.value;
        })

        passwordElement.addEventListener("change", function(event){
            password = event.target.value;
        })

        // 登录
        function login(){
            // 判断账号密码是否为空
            if (userName.length > 0 && password.length > 0){
                // 登录提示后刷新页面
                alert(`userName:${userName}, password:${password}`)
                noLogin = false;
                titleElement.innerText = `欢迎您：${userName}`;
                buttonElement.innerText = '注销';
                userName="";
                password="";
                userNameInputElement.style.visibility = 'hidden';
                passwordElement.style.visibility = 'hidden';
            } else {
                alert('账号或密码不能为空');
            }
        }

        // 登出
        function logout() {
            // 清空登录数据
            noLogin = true;
            titleElement.innerText = '欢迎您：未登录';
            buttonElement.innerText = '登录';
            userNameInputElement.style.visibility = 'visible';
            passwordElement.style.visibility = 'visible';
            userName = '';
            password = '';
        }
    </script>
</body>
</html>
